<template>
	<view class="content">
		<view class="ts_leixing">
			<text style="font-weight: 500;font-size: 32rpx;color: #fff;">内容</text>
		</view>
		<view class="section"><textarea placeholder="输入你要反馈的意见或者问题描述，我们将认真为您解答！" maxlength="350" v-model="content"
				style="color:white;" />
		</view>
		<view class="ts_addbtn">
			<text style="margin: 20rpx 0;font-weight: 500;font-size: 32rpx;">图片上传</text>
			<view class="">
				<image :src="item" mode="" v-for="(item, index) in images" :key="index" v-if="images"></image>
				<image :src="iconurl + '/static/newImg/sctp.png'" @click="addimg" v-if="images.length < 5"></image>
			</view>
		</view>
		<view class="ts_leixing">
			<text style="font-weight: 500;font-size: 32rpx;">联系方式</text>
		</view>
		<view class="section_ipt">
			<!-- <input type="text" placeholder="请填写您的姓名" /> -->
			<input type="text" placeholder="请填写您的电话" v-model="phone" style="color:white;" />
		</view>
		<view class="tdfoot allbtn flexs" @click="submit">提交反馈</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cat_id: 1, //1功能建议2使用建议3异常问题
			content: '',
			images: [],
			phone: "",
			iconurl: this.$configs.urls
		};
	},
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: "/userPage/user/fankuiRecord"
		})
	},
	onShow() {
		// 访问使清空数据（主要适用于从问题反馈页面返回清空数据）
		this.content = '',
			this.images = [],
			this.phone = ""
	},
	methods: {
		addimg() {
			var that = this;
			uni.chooseImage({
				count: 5,
				sourceType: ['album', 'camera'], //从相册选择
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					let srcImg = res.tempFilePaths;
					////console.log(srcImg);
					for (let i = 0; i < srcImg.length; i++) {
						////console.log(that.$configs.APIHOST + that.$api.user.file)
						uni.uploadFile({
							url: that.$configs.APIHOST + that.$api.user.file,
							filePath: srcImg[i],
							name: 'file',
							header: {
								Authorization: 'Bearer ' + uni.getStorageSync('USERINFO')
							},
							success: uploadFileRes => {
								////console.log(uploadFileRes)
								let data = JSON.parse(uploadFileRes.data);
								if (data.code == 0) {
									that.images.push(data.data.url);
								}
							}
						});
					}
				}
			});
		},
		submit() {
			if (this.content == '') {
				uni.showToast({
					title: '请输入内容',
					duration: 1500,
					icon: 'none'
				});
				return;
			}
			if (this.images == '') {
				uni.showToast({
					title: '请上传图片',
					duration: 1500,
					icon: 'none'
				});
				return;
			}
			if (this.phone == '') {
				uni.showToast({
					title: '请输入手机号',
					duration: 1500,
					icon: 'none'
				});
				return;
			}
			let data = {
				content: this.content,
				phone: this.phone,
				image: this.images
			};
			this.$Request.post(this.$api.user.problem, data).then(res => {
				uni.showToast({
					title: res.msg,
					duration: 1500,
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: "/userPage/user/fankuiRecord"
					});
				}, 800)
				clearTimeout();
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background: #262626;

	.section_ipt {
		padding: 20rpx 0;

		input {

			background: rgba(255, 231, 192, 0.1);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 2rpx solid #FED187;
			width: 90%;
			height: 75rpx;
			padding: 0 27rpx 0 23rpx;
			margin: 10rpx auto;
		}
	}

	.checkLeixing {
		color: #FFFFFF !important;
		background: #7E76ED !important;
	}

	.ts_leixing {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		padding-bottom: 0;

		text {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
			// margin-bottom: 20rpx;
		}

	}

	.ts_addbtn {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		text {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #fff;
		}

		view {
			display: flex;
			flex-wrap: wrap;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff;
			}

			image {
				width: 128rpx;
				height: 128rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
			}
		}
	}

	.tdfoot {
		position: fixed;
		bottom: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		color: #fff;
		width: 710rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: rgba(255, 231, 192, 0.1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 1rpx solid #FED187;
		font-weight: bold;
		border-radius: 48rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.section {
		width: 100%;
		min-height: 60rpx;
		// margin: 0 auto;
		// background: #fff;
		border-radius: 10rpx;
		color: #fff;

		textarea::-webkit-input-placeholder {
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #fff;
		}

		textarea {
			padding: 24rpx 26rpx 0 31rpx;
			height: 212rpx;
			width: 86%;
			background: rgba(255, 231, 192, 0.1);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 2rpx solid #FED187;
			margin: 10rpx auto;
		}

		image {
			width: 140rpx;
			height: 140rpx;
			margin: 0rpx 0 30rpx 30rpx;
		}
	}
}
</style>
